<template>
  <div
    v-if="vertical"
    class="g-container-Vertical"
    :style="{
      '--width': width,
      '--step': text.length,
      '--height': height,
      '--speed': interval + 's',
      backgroundColor,
      color: textColor,
      fontSize: fontSize + 'px',
    }"
  >
    <ul>
      <li v-for="item in text">
        <a :href="item.link">{{ item.title }}</a>
      </li>
      <li>
        <a :href="text[0].link">{{ text[0].title }}</a>
      </li>
    </ul>
  </div>
  <div
    v-else
    class="g-container-Horizon"
    :style="{
      '--step': text.length,
      '--height': height,
      '--speed': interval + 's',
      '--width': width,
      backgroundColor,
      color: textColor,
      fontSize: fontSize + 'px',
    }"
  >
    <ul>
      <li v-for="item in text">
        <a :href="item.link">{{ item.title }}</a>
      </li>
      <li>
        <a :href="text[0].link">{{ text[0].title }}</a>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
export default {
  //组件名称
  name: "ls-textScroll",
};
</script>

<script setup lang="ts">
interface Text {
  title: string; // 文字标题
  link?: string; // 跳转链接
}
interface Props {
  text: Text[]; // 滚动文字数组
  width?: number | string; // 滚动区域宽度，单位px
  height?: number; // 滚动区域高度，单位px
  backgroundColor?: string; // 滚动区域背景色
  textColor?: string;
  vertical?: boolean; // 是否垂直滚动
  interval?: number; // 文字滚动时间间隔，单位ms，垂直滚动时生效
  fontSize?: number | string; //文字大小
  hover?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  text: () => [],
  width: 300,
  height: 40,
  backgroundColor: "#FFF",
  textColor: "#000",
  fontSize: 20,
  vertical: false,
  interval: 3,
  hover: false,
});
</script>

<style lang="scss" scoped>
$height: 36;
$step: 6;
$speed: 0.8s;
$width: 300;
:root {
  --width: #{$width};
  --step: #{$step};
  --height: #{$height};
  --speed: #{$speed};
}
// 垂直滚动
.g-container-Vertical {
  width: calc(var(--width) * 1px);
  margin: auto;
  height: calc(var(--height) * 1px);
  line-height: calc(var(--height) * 1px);
  font-size: 20px;

  color: #fff;
  overflow: hidden;
  ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }

  ul li {
    flex-shrink: 0;
    width: 100%;

    box-sizing: border-box;
  }
  ul {
    animation: move calc(var(--speed) * var(--step)) steps(var(--step)) infinite;
  }

  ul li {
    white-space: nowrap;
    cursor: pointer;
    animation: liMove calc(var(--speed)) infinite;
  }
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--step) * var(--height) * -1px));
  }
}

@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100% {
    transform: translate(0, calc(var(--height) * -1px)) scale(1.1);
  }
}
// 横向滚动
.g-container-Horizon {
  width: calc(var(--width) * 1px);
  margin: auto;
  height: calc(var(--height) * 1px);
  line-height: calc(var(--height) * 1px);
  font-size: 20px;

  color: #fff;
  overflow: hidden;
  ul {
    display: flex;
    flex-wrap: nowrap;
    animation: moveHorizon calc(var(--speed) * var(--step)) steps(var(--step))
      infinite;
  }

  ul li {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    animation: liMoveHorizon calc(var(--speed)) infinite;
  }
}

@keyframes moveHorizon {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--step) * var(--width) * -1px), 0);
  }
}
@keyframes liMoveHorizon {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(calc(var(--width) * -1px), 0);
  }
}
</style>
